<template>
	<view class="content">
		<u-navbar :is-back="false" :immersive="true" title="我的" :border-bottom="false" :title-color="titleColor"
			:background="background">
		</u-navbar>
		<view class="user-box" @click="userxx()">
			<view class="user-tx">
				<image :src="userInfo.avatar" mode=""></image>
			</view>
			<view class="user-r">
				<view class="user-name">
					{{userInfo.nickname || '请登录~'}}
				</view>
				<view class="user-phone">
					账号：{{ phoneNumber}}
				</view>
			</view>
		</view>
		<!-- 新增加部分 -->
		<view class="zhye_box">
			<view class="zhye_box_pox flex">
				<view class="flex flxe_al" @click="pageTo('/pages/my/usercenter/usercenter')">
					<image src="https://z1.ax1x.com/2023/09/14/pPRjZtO.png" mode=""></image>
					<view class="zhye_box_pox_text">
						<view class="zhye_box_pox_title" v-if='userInfo.money'>
							{{userInfo.money}}
						</view>
						账户余额
					</view>
				</view>


				<view class="flex flxe_al" @click="pageTo('/pages/my/coupon/coupon')">
					<image src="https://z1.ax1x.com/2023/09/14/pPRjehD.png" mode=""></image>
					<view class="zhye_box_pox_text">
						<view class="zhye_box_pox_title">
							{{Coupon}}张
						</view>
						优惠券
					</view>
				</view>
			</view>
		</view>


		<view class="user-center">
			<view class="vip-center" @click="pageTo('/pages/my/usercenter/usercenter')">
				<text>开通会员，尊享更多特权~</text>
				<button class="u-reset-button"> 会员中心</button>
			</view>
			<view class="user-order">
				<view class="user-order-title">
					<text>我的订单</text>
					<view @click="goOrder(0)">
						查看全部 >
					</view>
				</view>
				<view class="user-order-list">
					<view class="user-order-li" v-for="(item,index) in orderList" :key="index" @click="goOrder(index)">
						<!-- <view class="badge"> -->
						<u-badge size="mini" v-if="orderInfo.length> 0" class="badge" :offset='[-17,-10]'
							:count="orderInfo[index].order_count" type="error"></u-badge>
						<!-- </view> -->
						<image :src="item.img" mode=""></image>
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>
			<view class="user-order">
				<view class="user-order-title">
					<text>全城取送订单</text>
					<view @click="goOrder1(0)">
						查看全部 >
					</view>
				</view>
				<view class="user-order-list">
					<view class="user-order-li" v-for="(item,index) in orderList1" :key="index" @click="goOrder1(index)">
						<!-- <view class="badge"> -->
						<u-badge size="mini" v-if="orderInfo1.length> 0" class="badge" :offset='[-17,-10]'
							:count="orderInfo1[index].order_count" type="error"></u-badge>
						<!-- </view> -->
						<image :src="item.img" mode=""></image>
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 邀请好友 -->
		<view class="yaoqing" @click="onPoster">
			<image :src="invImage" mode=""></image>
		</view>

		<view class="qitagongnneg">
			<view class="qitagongnneg-title">其他功能</view>
			<view class="qitagongnneg-list">
				<!-- <button class="u-reset-button qitagongnneg-li" >
					<view class="qitagongnneg-li-l">
						<image src="https://www.sdxiecheng.cn/img/user/yaoqing.png" mode=""></image>
						<text>邀请好友</text>
					</view>
					<view class="qitagongnneg-li-r">
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</button> -->
				<view class="qitagongnneg-li" v-for="(item,index) in qitaList" :key="index" @click="pageTo(item.url)">
					<view class="qitagongnneg-li-l">
						<image :src="item.img" mode=""></image>
						<text>{{ item.name }}</text>
					</view>
					<view class="qitagongnneg-li-r">
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</view>
				<button class="u-reset-button qitagongnneg-li" open-type="contact">
					<view class="qitagongnneg-li-l">
						<image src="https://www.sdxiecheng.cn/img/user/yaoqing.png" mode=""></image>
						<text>在线客服</text>
					</view>
					<view class="qitagongnneg-li-r">
						<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
					</view>
				</button>
				<button class="u-reset-button qitagongnneg-li" @click="goPhoneBtn()">
					<view class="qitagongnneg-li-l">
						<image src="https://z1.ax1x.com/2023/09/15/pPW1oZR.png" mode=""></image>
						<text>客服热线</text>
					</view>
					<view class="qitagongnneg-li-r color_active">
						{{kefu}}
					</view>
				</button>
			</view>
		</view>
		<shoproShare v-if="showPoster" ref="shoproCanvas" :canvasParams="canvasParams" @success="onSuccess">
		</shoproShare>
		<!-- 邀请二维码展示 -->
		<u-mask :show="codeShow" @click="show = false">
			<view class="warp">
				<view class="poster-img-box">
					<image class="poster-img" :src="posterImage" mode="widthFix"></image>
				</view>
				<view class="poster-btn-box u-m-t-20 u-flex u-row-between u-col-center" v-show="posterImage">
					<button class="cancel-btn u-reset-button" @tap="imageClear">取消</button>
					<button class="save-btn u-reset-button" @tap="saveImage">保存图片</button>
				</view>
			</view>
		</u-mask>
		<u-tabbar :list="tabbar" :before-switch="beforeSwitch" :mid-button="true" :border-top="false"
			mid-button-size="110" active-color="#FF9A33" inactive-color="#999999"></u-tabbar>
	</view>
</template>

<script>
	import shoproShare from '../../components/shopro-share/index.vue'
	export default {
		components: {
			shoproShare
		},
		data() {
			return {
				kefu:"",
				tabbar: [],
				userInfo: {},
				background: {
					'background': 'rgba(0,0,0,0)'
				},
				titleColor: '#fff',
				orderList: [{
						img: 'https://www.sdxiecheng.cn/img/user/daizhifu.png',
						name: '待支付'
					},
					{
						img: 'https://www.sdxiecheng.cn/img/user/daicunxie.png',
						name: '待存鞋'
					},
					{
						img: 'https://www.sdxiecheng.cn/img/user/xixiezhong.png',
						name: '洗鞋中'
					},
					{
						img: 'https://www.sdxiecheng.cn/img/user/daiquxie.png',
						name: '待取鞋'
					},
					{
						img: 'https://www.sdxiecheng.cn/img/user/shouhou.png',
						name: '售后'
					}
				],
				orderList1: [{
						img: 'https://www.sdxiecheng.cn/img/user/daizhifu.png',
						name: '待支付'
					},
					{
						img: 'https://www.sdxiecheng.cn/img/user/daicunxie.png',
						name: '待取鞋'
					},
					{
						img: 'https://www.sdxiecheng.cn/img/user/xixiezhong.png',
						name: '洗鞋中'
					},
					{
						img: 'https://www.sdxiecheng.cn/img/user/daiquxie.png',
						name: '待送鞋'
					},
					{
						img: 'https://www.sdxiecheng.cn/img/user/shouhou.png',
						name: '售后'
					}
				],
				qitaList: [{
						img: 'https://www.sdxiecheng.cn/img/user/yaoqing.png',
						name: '邀请好友',
						url: '/pages/my/invitation/invitation'
					},
					{
						img: 'https://z1.ax1x.com/2023/09/15/pPWYY36.png',
						name: '地址管理',
						url: '/pages/my/address'
					},
					// {
					// 	img: 'http://www.sdxiecheng.cn/img/user/youhuiquan.png',
					// 	name: '优惠券',
					// 	url: '/pages/my/coupon/coupon'
					// },
					{
						img: 'https://www.sdxiecheng.cn/img/user/liucheng.png',
						name: '洗鞋流程',
						url: '/pages/public/agreement/agreement?type=xixie'
					},
					{
						img: 'https://www.sdxiecheng.cn/img/user/xieyi.png',
						name: '使用协议',
						url: '/pages/public/agreement/agreement?type=xieyi'
					},
					{
						img: 'https://www.sdxiecheng.cn/img/user/wenti.png',
						name: '常见问题',
						url: '/pages/public/common_problem/common_problem'
					},
					{
						img: 'https://www.sdxiecheng.cn/img/user/guzhang.png',
						name: '故障保修',
						url: '/pages/public/fault/fault'
					},
					{
						img: 'https://www.sdxiecheng.cn/img/user/tousu.png',
						name: '投诉建议',
						url: '/pages/public/complaint/complaint'
					},
					
				],
				posterImage: '',
				showPoster: false,
				canvasParams: '',
				posterType: 'user',
				codeShow: false,
				erweima: '',
				backgroundImage: '',
				invImage: '',
				orderInfo: 0,
				orderInfo1: 0,
				Coupon:0,
				phoneNumber:"",
				
			}
		},
		onLoad() {
			this.tabbar = this.$store.state.tabbar
			this.getUser_rexian()
		},
		onShow() {
			this.phoneNumber = uni.getStorageSync('phoneNumber')
			this.getUserInfo()
			this.geiYaoQing()
			this.getOrderInfo()
			this.getOrderInfo1()
			this.getCouponList(1)
			
		},
		methods: {
			// 拨打电话
			goPhoneBtn(val) {
				console.log("拨打")
				uni.makePhoneCall({					
					// 手机号
					phoneNumber: this.kefu,
					// 成功回调
					success: (res) => {
					},
					// 失败回调
					fail: (res) => {

					}
				});
			},
			//跳转用武信息页面
			userxx() {
				uni.navigateTo({
					url: "/pages/my/user_xinxi"
				})
			},
			// 获取用户信息
			getUserInfo() {
				uni.$u.http.post('user/userinfo', {
					openid: uni.getStorageSync('openid')
				}).then(res => {
					this.userInfo = res.data
				})
			},
			//获取客服热线
			getUser_rexian() {
				uni.$u.http.post('user/kf_list', {
					openid: uni.getStorageSync('openid'),
					user_id: uni.getStorageSync('userId')
				}).then(res => {
					this.kefu = res.data.kf_mobile
				})
			},
			// 获取订单数据
			getOrderInfo1() {
				uni.$u.http.post('order/order_status', {}).then(res => {
					console.log(res.data)
					this.orderInfo = res.data
				})
			},
			// 获取订单数据
			getOrderInfo() {
				uni.$u.http.post('order/orderon_status', {}).then(res => {
					console.log(res.data)
					this.orderInfo1 = res.data
				})
			},
			// 优惠券未使用/已使用接口
			getCouponList(type){
				uni.$u.http.post('/coupon/coupon_use',{
					type:type
				}).then(res =>{
					console.log(res)
					if(res.data.length>0){
						this.Coupon=res.data.length
					}
				}).catch(err => {
				})
			},
			pageTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			//邀请好友
			geiYaoQing() {
				uni.$u.http.post('index/invitation_image').then(res => {
					console.log(res, '海报。。。11')
					this.invImage = 'https://www.sdxiecheng.cn' + res.data.img
				})
				uni.$u.http.post('user/create_invite').then(res => {
					console.log(res, '海报。。。')
					this.erweima = 'https://www.sdxiecheng.cn' + res.data.ewm
					this.backgroundImage = 'https://www.sdxiecheng.cn' + res.data.list.image
				})
			},

			onPoster() {
				console.log('点击->')
				this.geiYaoQing()
				this.posterImage = '';
				this.canvasParams = this.getPosterFormatter();
				this.showPoster = true;
			},

			// 绘制成功
			onSuccess(e) {
				this.posterImage = e;
				console.log(e)
				this.codeShow = true
			},
			// 获取海报格式,规则说明在@/shopro/poster/tools.js中的initDrawArray
			getPosterFormatter() {
				const that = this;
				let data = {};
				switch (this.posterType) {
					case 'user':
						data = {
							backgroundImage: that.backgroundImage,
							// backgroundImage: that.erweima,
							drawArray: [
								// {
								// 	name: '用户昵称',
								// 	type: 'text',
								// 	text: '用户昵称',
								// 	isBgCenter: true,
								// 	size: 28,
								// 	dy: 250,
								// 	color: '#333',
								// 	textAlign: 'middle',
								// 	textBaseLine: 'middle'
								// },
								// {
								// 	name: 'avatar',
								// 	type: 'image',
								// 	url: 'https://s1.ax1x.com/2022/07/29/vPlvgx.png',
								// 	alpha: 1,
								// 	isBgCenter: true,
								// 	dy: 95,
								// 	dWidth: 120,
								// 	dHeight: 120,
								// 	circleSet: {}
								// },
								// #ifdef MP-WEIXIN
								{
									name: '微信二维码',
									type: 'image',
									url: that.erweima,
									alpha: 1,
									isBgCenter: true,
									dx: 400,
									dy: 500,
									dWidth: 200,
									dHeight: 200
								},
								// #endif
								// #ifndef  MP-WEIXIN
								{
									name: '普通二维码',
									type: 'qrcode',
									text: that.shareInfo.path,
									size: 180,
									dy: 560,
									isBgCenter: true
								}
								// #endif
							]
						};
						break;
					default:
						console.log('%cerr:没有此类型海报数据', 'color:green;background:yellow');
						break;
				}
				return data;
			},
			beforeSwitch(index) {
				console.log(index)
				if (index != 2) {
					return true
				} else {
					this.saoma()
					return false
				}
			},
			saveImage() {
				let that = this
				uni.saveImageToPhotosAlbum({
					filePath: that.posterImage,
					success: res => {
						this.$u.toast('保存成功');
						this.codeShow = false;
					},
					fail: err => {
						console.log(`图片保存失败:`, err);
						this.$u.toast('保存失败');
					}
				});
				this.showPoster = false;
			},
			imageClear() {
				this.codeShow = false
				this.showPoster = false;
			},
			goOrder(index) {
				if (index == 4) {
					index = 5
				}
				uni.setStorageSync('index', index)
				uni.$emit('updateOrder', {
					index: index
				})
				uni.navigateTo({
					url: '../order/order'
				})
			},
			goOrder1(index) {
				if (index == 4) {
					index = 5
				}
				uni.setStorageSync('index', index)
				uni.$emit('updateOrder', {
					index: index
				})
				uni.navigateTo({
					url: '../order/all_city_order'
				})
			},
			saoma() {
				let that = this
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);

						let parames = that.queryURLParams(res.result)
						// console.log('参数->',that.queryURLParams(res.result))
						uni.navigateTo({
							url: '/pages/service/service?id=' + parames.id
						})
					}
				});
			},
			queryURLParams(url) {
				let pattern = /(\w+)=(\w+)/ig; //定义正则表达式
				let parames = {}; // 定义参数对象
				url.replace(pattern, ($, $1, $2) => {
					parames[$1] = $2;
				});
				return parames;
			},

		}
	}
</script>

<style lang="less">
	.warp {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.poster-img-box {
		.poster-img {
			width: 660rpx;
			min-height: 800rpx;
			border-radius: 20rpx;
		}
	}

	.content {
		width: 100%;
		// background-image: url(https://s1.ax1x.com/2022/07/26/jzkVg0.jpg);
		// background-size: 100% 350rpx;
		// background-repeat: no-repeat;
	}

	.user-box {
		height: 370rpx;
		background: url(https://www.sdxiecheng.cn/uploads/20231023/3bab1ee40b0b77e9f798836e5c2d0945.jpg) no-repeat;
		background-size: 100% 100%;
		display: flex;
		padding-top: calc(129rpx + var(--status-bar-height));
		padding-left: 60rpx;

		.user-tx {
			width: 114rpx;
			height: 114rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 36rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.user-r {
			margin-top: 10rpx;

			.user-name {
				font-size: 36rpx;
				color: #FFFFFF;
				margin-bottom: 8rpx;
				font-weight: bold;
			}

			.user-phone {
				font-size: 24rpx;
				color: #FFFFFF;
				font-weight: 500;
			}
		}
	}

	.user-center {
		padding: 0 20rpx;
		margin-top: 20rpx;

		.vip-center {
			width: 100%;
			background: url(https://www.sdxiecheng.cn/img/user/vip-bg.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 42rpx;
			padding-right: 20rpx;
			height: 80rpx;

			text {
				font-size: 26rpx;
				color: #F9E0B7;
			}

			button {
				width: 130rpx;
				height: 40rpx;
				background: #F9E0B7;
				border-radius: 20rpx;
				color: 24rpx;
				color: #151515;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0;
			}
		}

		.user-order {
			background: #FFFFFF;
			overflow: hidden;

			.user-order-title {
				padding-top: 39rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 30rpx;
				position: relative;

				text {
					font-size: 30rpx;
					font-weight: bold;
					padding-left: 30rpx;
				}

				view {
					color: #999999;
					font-size: 24rpx;
				}

				&::after {
					content: "";
					position: absolute;
					left: -10rpx;
					width: 20rpx;
					height: 20rpx;
					background: #FF9A33;
					border-radius: 50%;
					overflow: hidden;
				}
			}
		}
	}

	.user-order-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		margin-top: 51rpx;
		padding-bottom: 41rpx;

		.user-order-li {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			text {
				font-size: 24rpx;
				color: #999999;
			}

			image {
				width: 42rpx;
				height: 42rpx;
				margin-bottom: 22rpx;
			}
		}

		.badge {
			// width: 30rpx;
			// height: 30rpx;
			// background-color: blue;
			// color: white;
		}
	}

	.yaoqing {
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		padding: 0 20rpx;

		image {
			width: 100%;
			height: 200rpx;
		}
	}

	.qitagongnneg {
		margin: 0 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		overflow: hidden;

		.qitagongnneg-title {
			height: 108rpx;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			font-size: 30rpx;
			font-weight: 800;
			position: relative;

			&::after {
				content: "";
				position: absolute;
				left: -10rpx;
				width: 20rpx;
				height: 20rpx;
				background: #FF9A33;
				border-radius: 50%;
				overflow: hidden;
			}
		}

		.qitagongnneg-list {
			.qitagongnneg-li {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				border-top: 1px solid #EEEEEE;
				padding: 0 10rpx;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 12rpx;
				}
			}
		}
	}

	// 分享海报
	.poster-btn-box {
		.cancel-btn {
			width: 240rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: #ffffff;
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #999999;
		}

		.save-btn {
			width: 240rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: #FF9A33;
			border-radius: 35rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
			margin-left: 20rpx;
		}
	}

	.user-order-list {
		/deep/.u-badge {
			min-width: 40rpx;
			height: 40rpx;
			font-size: 20rpx;
		}
	}

	.zhye_box {
		height: 94rpx;
		position: relative;
		padding: 0 20rpx;
	}

	.zhye_box_pox {
		padding: 25rpx 39rpx;
		// height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 9rpx 1rpx rgba(60, 59, 59, 0.19);
		border-radius: 10rpx;
		position: absolute;
		bottom: 0;
		left: 20rpx;
		width: calc(100% - 40rpx);
	}

	.zhye_box_pox image {
		width: 58rpx;
		height: 55rpx;
		margin-right: 37rpx;
	}

	.zhye_box_pox_text {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}

	.zhye_box_pox_title {
		font-size: 36rpx;
		font-weight: bold;
		color: #FF9A33;
	}

	.zhye_box_pox>view:first-of-type {
		margin-right: 140rpx;
		position: relative;
	}

	.zhye_box_pox>view:first-of-type:after {
		content: "";
		width: 2rpx;
		height: 60rpx;
		background: #FF9A33;
		position: absolute;
		right: -69rpx;
		top: 50%;
		transform: translate(0, -50%);
	}

	.color_active {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FF9A33;
	}
</style>